<template>
  <div class="home-container">
    <img src="@/assets/Background.jpg" alt="背景图片" class="background-image" />
    <div class="content">
      <h1 style="font-size: 64px;">A I O R P G 平 台</h1>
      <h2 style="margin-bottom: 20px;opacity: 0.7">一款真正的AI单人跑团系统</h2>
      <a-button size="large" @click="goToScript">开始游戏</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HeroSection',
  methods: {
    goToScript() {
      this.$router.push('/AIOPlayScript');
    }
  },
}

</script>

<style scoped>
.home-container {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: fadeIn 1s ease-out forwards
}
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0;
  animation: fadeIn 1s ease-out forwards
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(1.05);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}
</style>